<template>
  <div class="interviewVideo_main" id="videoContainer">
    <!--此处根据pdf的页数动态生成相应数量的canvas画布-->
    <canvas
      v-for="pageIndex in pdfPages"
      :id="`pdf-canvas-` + pageIndex"
      :key="pageIndex"
      style="display: block"
    ></canvas>
  </div>
</template>
<script setup>
import { getPreviewById, getPreview } from "@/api";
import { ref } from "vue";
import * as pdfjsLib from "pdfjs-dist";

let pdfDoc = reactive({}); // 保存加载的pdf文件流
let pdfPages = ref(0); // pdf文件的页数

let pdfScale = ref(0.8); // 缩放比例

const CM20240408 = "http://localhost:18888" + import.meta.env.BASE_URL + 'static/pdf/CM20240408.pdf'; // 修改为您的 PDF 文件的路径

//调用loadFile方法
onMounted(() => {
  getPreviewFn();
  // loadFile("https://java-qa.qdama.cn/weboffice/v1/api/file/download/123.pdf")
});
//获取pdf文档流与pdf文件的页数
const loadFile = async (url) => {
  pdfjsLib.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.js",import.meta.url).href;
  const loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then((pdf) => {
    pdfDoc = pdf;
    pdfPages.value = pdf.numPages;
    nextTick(() => {
      renderPage(1);
    });
  });
};
//渲染pdf文件
const renderPage = (num) => {
  pdfDoc.getPage(num).then((page) => {
    const canvasId = "pdf-canvas-" + num;
    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext("2d");
    const dpr = window.devicePixelRatio || 1;
    const bsr =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1;
    const ratio = dpr / bsr;
    console.log(ctx,dpr, bsr, ratio);
    const viewport = page.getViewport({ scale: pdfScale.value });
    canvas.width = viewport.width * ratio;
    canvas.height = viewport.height * ratio;
    canvas.style.width = viewport.width + "px";
    canvas.style.height = viewport.height + "px";
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
    const renderContext = {
      canvasContext: ctx,
      viewport: viewport,
    };
    page.render(renderContext);
    if (num < pdfPages.value) {
      renderPage(num + 1);
    }
  });
};

function getPreviewFn() {
  loadFile(CM20240408);
}

// 将返回的流数据转换为url
function getObjectURL(file) {
  var binaryData = [];
  binaryData.push(file);
  let url = null;
  if (window.createObjectURL !== undefined) {
    // basic
    url = window.createObjectURL(
      new Blob(binaryData, { type: "application/pdf;chartset=utf-8" })
    );
  } else if (window.webkitURL !== undefined) {
    // webkit or chrome
    try {
      url = window.webkitURL.createObjectURL(
        new Blob(binaryData, { type: "application/pdf;chartset=utf-8" })
      );
    } catch (error) {}
  } else if (window.URL !== undefined) {
    // mozilla(firefox)
    try {
      url = window.URL.createObjectURL(
        new Blob(binaryData, { type: "application/pdf;chartset=utf-8" })
      );
    } catch (error) {}
  }
  return url;
}
</script>
<style>
#videoContainer {
  /* height: 842px; */
}
.show_sop {
  width: 100%;
  height: 100%;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 0 6px rgba(0, 0, 0, 0.04);
}
canvas {
  width: 100%;
  height: 100%;
}
</style>
